<template>
    <div class='login-div center'>
        <div class='login-logo'>
            <div class="center">
                <!-- <img src="/vite.svg" class="logo" alt="Vite logo" /> -->
            </div>
        </div>
        <div class='login-form'>
            <div class='center'>
                <n-input v-model:value='username' placeholder='username' />
                <n-input v-model:value='password' placeholder='password' />
                <n-button @click='login'>登录</n-button>
            </div>
        </div>
    </div>
    <useStatement/>
</template>

<script lang='ts' setup>
import { NInput, NButton } from 'naive-ui';

import { ref } from 'vue'
import requset from '@/utils/requset'
import type { response } from '@/utils/requset'
import type { User } from '@/utils/globalData'
import $data from '@/utils/globalData'
import { useRouter } from 'vue-router'
import useStatement from '@/views/useStatement/index.vue'

const username = ref('')
const password = ref('')
const router = useRouter()

function login() {
    requset.login('/login', {
        username: username.value,
        password: password.value
    }).then((res: response<User>) => {
        if (res.status !== 200) {
            return;
        }
        let data = res.data.data
        $data.setUser(data);
        router.push({
            name: 'main'
        })
    })
}
</script>

<style scoped>
@import '@/assets/css/index.css';

.login-div {
    width: 480px;
    height: 400px;
    text-align: center;
    background-color: rgba(240, 240, 240, 70);
    border: 2px solid black;
    border-radius: 30px;
}

.login-logo {
    width: 250px;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

.login-form {
    width: 230px;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

.n-input {
    width: 200px;
    margin: 10px 0;
}

.n-button {
    width: 200px;
    margin: 10px 0;
}
</style>